<template>
  <Upload
    :imgList="imgListMap[_info?.field] || []"
    maxWidth="200"
    maxHeight="200"
    :multiple="_info.field_value_type.includes('[]')"
    :limit="_rules.max_array || 1"
    :maxSize="2"
    :disabled="_info.disabled || false"
    @changeImgs="changeImgs"
  />
  <div class="form-intro">仅支持png、jpg、jpeg格式图片，最大2M</div>
</template>

<script setup>
import { addFileList } from '@/utils';
import { getInfo, getRules, isArray } from '../const';
import Upload from '@/components/Upload';

const props = defineProps({
  formInfo: {
    type: Object,
    default: () => {}
  },
  formData: {
    type: Object,
    default: () => {}
  },
  imgListMap: {
    type: Object,
    default: () => {}
  },
  topExpose: {
    type: Object,
    default: () => {}
  }
});

const _info = computed(() => getInfo(props.formInfo));
const _rules = computed(() => getRules(props.formInfo));

// 图片反显
function reverseImg() {
  const field = _info.value.field;
  const data = _info.value.value;
  props.imgListMap[field] = addFileList({
    fileList: [],
    links: isArray(data) ? data : data ? [data] : []
  });
}
reverseImg();

function changeImgs(list) {
  const field = _info.value.field;
  props.imgListMap[field] = list;
  if (_info.value.field_value_type.includes('[]')) {
    props.formData[field] = list
      ?.filter(item => item.resUrl)
      .map(item => item.resUrl);
  } else {
    props.formData[field] = list?.[0]?.resUrl || '';
  }
}
</script>

<style lang="scss" scoped></style>
